<template lang="pug">
    div
        h1 Banner管理
        el-table(:data="list")
            el-table-column(label="相关图片")
                template(slot-scope="scope")
                    img(:src="`https://radish.oss-cn-beijing.aliyuncs.com/${scope.row.img_url}`")
            el-table-column(label="指向链接")
                template(slot-scope="scope")
                    a(:href="scope.row.href") 链接
            el-table-column(prop="orderby",     label="排序序号")
            el-table-column(label="类型")
                template(slot-scope="scope") {{scope.row.type === 1 ? '首页' : '启动页'}}
            el-table-column(label="创建时间")
                template(slot-scope="scope") {{scope.row.create_time | time}}
            el-table-column(label="更新时间")
                template(slot-scope="scope") {{scope.row.update_time | time}}
            el-table-column(label="操作")
                template(slot-scope="scope")
                    Button.button(type="info",    @click="update(scope.row.banner_id)") 修改
                    Button.button(type="error",   @click="destroy(scope.row.banner_id)") 删除
        Button.button(type="success", @click="create") 增加

        Modal(v-model="modal.isShow", title="Banner", :mask-closable="false", width="60")
            Form(ref="form", :model="modal.form", :rules="modal.rules", :label-width="120")
                FormItem(label="类型", prop="type")
                    Select(v-model="modal.form.type")
                        Option(:value="1", key="1") 首页
                        Option(:value="2", key="2") 启动页
                FormItem(label="排序数字", prop="orderby")
                    Input(v-model="modal.form.orderby", placeholder="排序数字", number)
                FormItem(label="跳转链接", prop="href")
                    Input(v-model="modal.form.href")
                FormItem(label="图片", prop="img_url")
                    p 上传文件必须是 jpg 或 png 格式的图片，每个文件大小不超过 1MB
                    p 重新上传会覆盖掉原有的文件
                    img(v-if="modal.form.img_url", :src="`https://radish.oss-cn-beijing.aliyuncs.com/${modal.form.img_url}`", style="width: 200px")
                    Upload(
                        action="http://radish.oss-cn-beijing.aliyuncs.com",
                        :data="upload",
                        :show-upload-list="false",
                        :before-upload="handleBeforeUpload"
                        :on-success="uploadComplete",
                        :default-file-list="modal.form.img_url ? [{url: `https://radish.oss-cn-beijing.aliyuncs.com/${modal.form.img_url}`}] : []",
                        :format="['jpg', 'jpeg', 'png']",
                    )
                        Button
                            Icon(type="plus-circled", size="20")
            div(slot="footer")
                Button(@click="submit") 提交

</template>

<script>
    export default {
        data() {
            return {
                list: [],

                modal: {
                    isShow: false,
                    form: {
                        banner_id: '',
                        img_url: '',
                        href: '',
                        orderby: '',
                        type: '',
                    },
                    rules: {
                        img_url: [
                            {message: '图片必须上传', required: true},
                        ],
                        href: [
                            {message: '链接必填', required: true},
                        ],
                        orderby: [
                            {message: '序号必填', required: true},
                        ],
                        type: [
                            {message: '类型必填', required: true},
                        ]
                    }
                },

                beforeUpload: {
                    content_type: '',
                    date: 0,
                    bucket: 'radish',
                    dir: 'banner',
                    filename: '',
                    type: 'post'
                },
                upload: {
                    key: '',
                    OSSAccessKeyId: '',
                    Signature: '',
                    policy: '',
                    success_action_status: 201,
                }
            };
        },

        methods: {
            async index() {
                this.list = await this.$http.post('tools_banner/getBannerList');
            },

            // 点击「添加」按钮
            async create() {
                this.modal.form.banner_id = -1;
                this.modal.isShow = true;
            },

            // 点击「修改」按钮
            update(banner_id) {
                this.modal.form = this.list.find(banner => banner.banner_id === banner_id);
                this.modal.isShow = true;
            },

            // 供 create 和 update 提交
            async submit() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        await this.$http.post('tools_banner/addOrUpdateBanner', this.modal.form);
                        this.index();
                        this.modal.isShow = false;
                        this.$refs.form.resetFields();
                    }
                });
            },

            // 上传之前，先去接口拿数据
            async handleBeforeUpload(file) {
                //console.log(file);
                this.beforeUpload.content_type = file.type;
                this.beforeUpload.date = Date.now();
                this.beforeUpload.filename = file.name;

                const data = await this.$http.post('ali_oss/getSign', this.beforeUpload);

                this.upload.key = data.filename;
                this.upload.OSSAccessKeyId = data.accessKeyID;
                this.upload.Signature = data.sign;
                this.upload.policy = data.policyBase64;

                return true;
            },

            // 上传之后，更新图片地址
            async uploadComplete() {
                this.modal.form.img_url = this.upload.key;
            },

            async destroy(banner_id) {
                try {
                    await this.$confirm(`确认删除该 Banner？`, 'Banner 处理确认');
                    await this.$http.post('tools_banner/delBanner', {banner_id});
                    this.index();
                } catch (e) {}
            }
        },
        created() {
            this.index();
        }
    }
</script>
